import React,{useState,useEffect} from 'react'


const MouseTrack:React.FC = ()=>{

  const [posions,setPosons] = useState({x:0,y:0})
  //默认渲染后执行， 加入第二个参数后 只在参数更新时执行
  useEffect(()=>{
    console.log('add effect',posions.x)
    const updateMosefn = (e:MouseEvent)=>{
      console.log('设置更新位置')
      setPosons({x:e.clientX,y:e.clientY})
    }
    document.addEventListener('click',updateMosefn)
    return ()=>{
      //清除上一次的addEventListener
      console.log('remove effect' ,posions.x)
      document.removeEventListener('click',updateMosefn)
    }
  },[posions])

  console.log("before render...")
  return (
    <p>x:{posions.x}  y:{posions.y}</p>
  )
}


export default MouseTrack
